<template>
  <div style="width: 100%;height: 100%">
    <div ref="container" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
import Charts from '@jiaminghi/charts'
import {currentGET} from "api";

export default {
  data() {
    return {
      option1: {
        legend: {
          data: ['销售数量', '完成率'],
          bottom: 10
        },
        xAxis: {
          data: [
            '一月份', '二月份', '三月份', '四月份', '五月份', '六月份',
            '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'
          ],
          axisLabel: {
            style: {
              rotate: 20,
              textAlign: 'left',
              textBaseline: 'top',
              fill: '#1ed3e5',
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            name: '销售数量',
            data: 'value',
            min: 0,
            max: 1000,
            interval: 200,
            splitLine: {
              style: {
                lineDash: [3, 3],
              }
            },
            axisLabel: {
              formatter: '{value}',
              style: {
                fill: '#1ed3e5',
              }
            },
            axisTick: {
              show: false
            }
          },
          {
            name: '完成率',
            data: 'value',
            position: 'right',
            min: 0,
            max: 100,
            interval: 20,
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}%',
              style: {
                fill: '#1ed3e5',
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '销售数量',
            data: [
              175, 125, 90, 130, 45, 65,
              65, 47, 50, 52, 45, 37
            ],
            type: 'bar',
            gradient: {
              color: ['#37a2da', '#67e0e3']
            },
            animationCurve: 'easeOutBounce'
          },
          {
            name: '完成率',
            data: [
              23, 18, 16, 14, 10, 8,
              6, 6, 6, 6, 6, 5
            ],
            type: 'line',
            yAxisIndex: 1,
            animationCurve: 'easeOutBounce'
          }
        ]
      }
    }
  },
  methods: {
    async init() {
      await currentGET('big6').then(res => {
        this.option1.xAxis.data = res.data.category
        this.option1.series[0].data = res.data.barData
        // 需要转为number原string
        let filterRateDatum = []
        for (let rateDatum of res.data.rateData) {
          filterRateDatum.push(+rateDatum)
        }
        this.option1.series[1].data = filterRateDatum
      })

      const myChart = new Charts(this.$refs.container)
      myChart.setOption(this.option1)
    }
  },
  mounted() {
    this.init()
    setInterval(this.init, 5000)
  }
}
</script>

<style>

</style>
